<template>
  <div class="app-container">
    <!-- 搜索工具栏 -->
    <el-card class="search-card" shadow="hover" v-hasPermi="['equipment:list:query']">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="装备名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入装备名称" clearable />
        </el-form-item>
        <el-form-item label="装备类型" prop="type">
          <el-cascader
            v-model="queryParams.type"
            :options="typeOptions"
            :props="{ checkStrictly: true }"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-hasPermi="['equipment:list:add']">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增装备</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" @click="handleManageType">类型管理</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-view" @click="goToApproval">审批详情</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-badge :value="pendingCount" :max="99" class="notice-badge">
          <el-button type="warning" @click="showNoticePopover = !showNoticePopover">
            <i class="el-icon-bell"></i>
          </el-button>
        </el-badge>
        
        <!-- 消息通知弹出框 -->
        <el-popover
          v-model="showNoticePopover"
          placement="bottom"
          width="300"
          trigger="manual">
          <div class="notice-list">
            <div v-if="noticeList.length === 0" class="empty-text">暂无新消息</div>
            <div v-else v-for="(notice, index) in noticeList" 
              :key="index" 
              class="notice-item"
              @click="handleNoticeClick(notice)">
              <div class="notice-content">
                {{ notice.borrower }}申请借用{{ notice.equipmentName }}
              </div>
              <div class="notice-time">{{ notice.applyTime }}</div>
            </div>
          </div>
          <div class="notice-footer" v-if="noticeList.length > 0">
            <el-button type="text" @click="goToApproval">查看全部</el-button>
          </div>
        </el-popover>
      </el-col>
    </el-row>

    <!-- 装备列表 -->
    <el-card shadow="hover">
      <el-table v-loading="loading" :data="equipmentList">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column label="装备图片" align="center" width="100">
          <template slot-scope="scope">
            <el-image 
              :src="scope.row.image" 
              :preview-src-list="[scope.row.image]"
              fit="cover"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column label="装备名称" align="center" prop="name">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.name }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="装备类型" align="center" prop="typeName" />
        <el-table-column label="数量" align="center" prop="number" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
              {{ scope.row.status === '0' ? '正常' : '维护中' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="维护人员" align="center" prop="maintainer" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 添加或修改装备对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <!-- 对话框内容 -->
    </el-dialog>

    <!-- 装备类型管理对话框 -->
    <el-dialog title="装备类型管理" :visible.sync="typeOpen" width="600px" append-to-body>
      <!-- 类型管理内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Equipment",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数 
      total: 0,
      // 装备列表
      equipmentList: [
        {
          id: 1,
          name: '95式礼宾枪',
          typeName: '礼宾枪/95式礼宾枪',
          type: ['2', '21'],
          number: 5,
          status: '0',
          maintainer: '张三',
          maintainTime: '2024-03-15',
          image: 'https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
        },
        {
          id: 2, 
          name: '礼服上衣',
          typeName: '礼服/上衣',
          type: ['1', '12'],
          number: 10,
          status: '1',
          maintainer: '李四',
          maintainTime: '2024-03-14',
          image: 'https://img0.baidu.com/it/u=2521851051,2189866243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
        },
        {
          id: 3,
          name: '国旗',
          typeName: '国旗',
          type: ['3'],
          number: 10,
          status: '0',
          maintainer: '王五',
          maintainTime: '2024-03-13',
          image: 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg'
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示类型管理弹出层
      typeOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        type: undefined
      },
      // 装备类型选项
      typeOptions: [
        {
          value: '1',
          label: '礼服',
          children: [
            { value: '11', label: '帽子' },
            { value: '12', label: '上衣' },
            { value: '13', label: '裤子' },
            { value: '14', label: '鞋子' }
          ]
        },
        {
          value: '2',
          label: '礼宾枪',
          children: [
            { value: '21', label: '95式礼宾枪' },
            { value: '22', label: '56式礼宾枪' }
          ]
        },
        {
          value: '3',
          label: '国旗',
          children: []
        }
      ],
      borrowDialogVisible: false, // 借用对话框的显示状态
      borrowForm: {
        equipmentId: null,
        borrower: '',
        borrowDate: '',
        returnDate: '',
        reason: ''
      },
      
      showNoticePopover: false,
      pendingCount: 2,
      noticeList: [
        {
          borrower: '张三',
          equipmentName: '礼服',
          applyTime: '2024-03-19 14:30:00'
        },
        {
          borrower: '李四',
          equipmentName: '礼宾枪',
          applyTime: '2024-03-19 15:00:00'
        }
      ]
    };
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询装备列表
    getList() {
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        this.total = this.equipmentList.length
        this.loading = false
      }, 300)
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1
      // 根据查询条件过滤数据
      const filteredList = this.equipmentList.filter(item => {
        const nameMatch = !this.queryParams.name || 
          item.name.toLowerCase().includes(this.queryParams.name.toLowerCase())
        const typeMatch = !this.queryParams.type || 
          item.type.join(',').includes(this.queryParams.type.join(','))
        return nameMatch && typeMatch
      })
      this.total = filteredList.length
    },
    // 重置按钮操作 
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 新增按钮操作
    handleAdd() {
      this.title = "添加装备"
      this.open = true
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.title = "修改装备"
      // 复制一份数据,避免直接修改列表数据
      const equipmentData = JSON.parse(JSON.stringify(row))
      this.form = equipmentData
      this.open = true
    },
    // 删除按钮操作
    handleDelete(row) {
      this.$modal.confirm('是否确认删除该装备？').then(() => {
        this.loading = true
        // 模拟删除操作
        const index = this.equipmentList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.equipmentList.splice(index, 1)
          this.total = this.equipmentList.length
          this.$modal.msgSuccess("删除成功")
        }
        this.loading = false
      })
    },
    // 查看详情
    handleDetail(row) {
      this.$router.push({
        path: '/manager/equipment/detail',
        query: {
          id: row.id,
          info: JSON.stringify(row)
        }
      })
    },
    // 管理装备类型
    handleManageType() {
      this.typeOpen = true;
    },
    handleBorrow(row) {
      this.borrowForm.equipmentId = row.id;
      this.borrowDialogVisible = true;
    },
    handleNoticeClick(notice) {
      this.showNoticePopover = false
      this.goToApproval()
    },
    goToApproval() {
      this.$router.push('/manager/equipment/approval')
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .search-card {
    margin-bottom: 20px;
  }
  
  .mb8 {
    margin-bottom: 20px;
  }

  .delete-btn {
    color: #F56C6C;
  }
}

.notice-badge {
  margin-right: 40px;
}

.notice-list {
  max-height: 300px;
  overflow-y: auto;

  .empty-text {
    text-align: center;
    color: #909399;
    padding: 20px 0;
  }

  .notice-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #EBEEF5;

    &:hover {
      background-color: #F5F7FA;
    }

    .notice-content {
      font-size: 14px;
      color: #303133;
      margin-bottom: 5px;
    }

    .notice-time {
      font-size: 12px;
      color: #909399;
    }
  }
}

.notice-footer {
  text-align: center;
  padding: 10px 0 0;
  border-top: 1px solid #EBEEF5;
}
</style>
